<template>
  <div class="agreement-page">
    <div class="content">
      <div class="header">
        <h1 class="title">帮助中心</h1>
        <div class="update-time">更新时间：2025年8月1日</div>
      </div>

      <div class="agreement-content">
        <section class="section">
          <h2>如何下单？</h2>
          <p style="text-indent: 2em;">打开小程序，搜索或选择商家，添加商品到购物车，点击“去结算”，填写收货地址和联系方式，确认信息后提交订单即可。</p>
        </section>

        <section class="section">
          <h2>支付后没收到订单怎么办？</h2>
          <p style="text-indent: 2em;">请检查并保存微信支付凭证和订单截图并联系我们，提供订单号和支付时间，客服会协助查询。</p>
        </section>

        <section class="section">
          <h2>支持哪些支付方式？</h2>
          <p style="text-indent: 2em;">目前支持微信支付，后续将逐步开通更多支付渠道。</p>
        </section>

        <section class="section">
          <h2>配送地址写错了怎么办？</h2>
          <p style="text-indent: 2em;">在订单界面选择联系商家或者骑手说明新地址。</p>
        </section>

        <section class="section">
          <h2>如何联系客服？</h2>
          <p style="text-indent: 2em;">点击小程序“我的”页面，系统服务中点击“在线客服”</p>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Return from '@/components/Return.vue'

const capsuleTop = ref(0)

const calcCapsuleTop = () => {
  // #ifdef MP-WEIXIN
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
  capsuleTop.value = menuButtonInfo.bottom + 20
  // #endif
}

onMounted(() => {
  calcCapsuleTop()
})
</script>

<style lang="scss" scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.content {
  padding: 0 40rpx 40rpx;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  background: white;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #191919;
    margin-bottom: 16rpx;
  }

  .update-time {
    font-size: 24rpx;
    color: #999;
  }
}

.agreement-content {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;

  .section {
    margin-bottom: 40rpx;
    text-align: justify;

    &:last-child {
      margin-bottom: 0;
    }

    h2 {
      font-size: 32rpx;
      font-weight: bold;
      color: #191919;
      margin-bottom: 20rpx;
    }

    p {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    ul {
      padding-left: 32rpx;

      li {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
        list-style: disc;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
